<template>
	<div class="app-edit">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">编辑表单</span>
				<span class="h-panel-right">
					<a @click="close"><i class="icon guanbi"></i></a>
				</span>
			</div>
			<div class="h-panel-body">
				<Form class="setting-form" mode="twocolumn">
					<FormItem label="用户">
						<input v-if="id>0" type="text" :value="data.user.phone" readonly/>
						<CategoryNet v-else v-model="data.user_id" url="user" :tables="[{title:'电话',field:'phone'},{title:'昵称',field:'nickname'}]" placeholder="点击选择用户"/></CategoryNet>
					</FormItem>
					<FormItem label="时间">
						<DatePicker :disabled="true" :value="$global.getDateTime(data.create_time)" type="datetime" placeholder="提交后自动生成"></DatePicker>
					</FormItem>
					<FormItem label="状态">
						<Radio v-model="data.status" :datas="$global.config.formorderStatus"></Radio>
					</FormItem>
					<FormItem label="表单">
						<Select :disabled="true" :value="data.form_id" :datas="$global.config.forms"></Select>
					</FormItem>
					<FormItem label="备注" single>
						<textarea v-model="data.mark"></textarea>
					</FormItem>
					<Render v-for="(item,index) in data.form" :key="index" :conf="item || {}"></Render>
				</Form>
			</div>
			<Form class="setting-form" mode="twocolumn">
				<FormItem single>
					<Button color="primary" @click="submit">提交</Button>
					<Button @click="close">取消</Button>
				</FormItem>
			</Form>
		</div>
	</div>
</template>

<script>
import {Render} from '@/components/custom-form'
export default {
	components: {
		Render
	},
	props: {
		id: Number
	},
	data() {
		return {
			data: {user:{}}
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData() {
			if(this.id > 0){
				this.loading = true
				this.data = await this.$api('GET','formorder/'+this.id)
				this.loading = false
			}
		},
		async submit (){
			let res = ''
			this.loading = true
			if(this.id > 0){
				res = await this.$api('PUT','formorder/'+this.id,this.data)
			}else{
				res = await this.$api('POST','formorder',this.data)
			}
			this.loading = false
			if(res){
				this.close()
			}
		},
		close (){
			this.$emit('close')
		}
	}
};
</script>

<style lang="less">
	.productPic {
		height: 50px;
		max-width: 120px;
	}
	.order-form {
		.h-form-item{
			padding: 3px !important;
		}
	}
	.addproductdiv{
		width: 75px;
		position:absolute;
		cursor: pointer;
		pointer-events: none;
		background: @primary-color;
		color: #ffffff;
		text-align: center;
		line-height: 30px;
		height: 30px;
		border-radius: 3px;
	}
	.addproduct {
		width: 75px;
		.showButton{
			cursor: pointer;
			background: @primary-color;
			span{
				color: #ffffff !important;
			}
		}
	}
</style>